<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="评价人账号">
        <el-input v-model="listQuery.q_memberName" style="width: 200px" size="small" class="filter-item" />
      </el-form-item>
      <el-form-item label="评价状态">
        <el-select v-model="listQuery.q_state" size="small" placeholder="请选择">
          <el-option v-for="item in commState" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="detail">详情</el-button>
      <el-button size="small" type="primary" @click="stateYes" v-permission="['admin/member/productcomments/pass']">审批通过</el-button>
      <el-button size="small" type="primary" @click="stateNo" v-permission="['admin/member/productcomments/reject']">删除</el-button>
    </div>
    <el-table
      ref="singleTable"
      :data="dataList"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      @current-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column label="评价商品" width="300" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <img width="80" height="80" :src="$imagePath + scope.row.productImg" style="vertical-align: middle" />
            {{ scope.row.productName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="memberName" width="150" label="评价人账号"></el-table-column>
      <el-table-column property="content" width="300" show-overflow-tooltip label="评价内容"></el-table-column>
      <el-table-column property="grade" width="150" label="评分(分)"></el-table-column>
      <el-table-column property="state" width="100" label="处理状态">
        <template slot-scope="scope">
          {{ codeBox.PRODUCT_COMM_STATE[scope.row.state] }}
        </template>
      </el-table-column>
      <el-table-column property="replyName" width="150" label="回复人"></el-table-column>
      <el-table-column property="replyContent" width="300" show-overflow-tooltip label="回复内容"></el-table-column>
      <el-table-column property="createTime" width="200" label="评价时间"></el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="judgmentTitle" :visible.sync="dialogFormVisible" width="60%">
      <div class="app-container">
        <el-row>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            label-position="right"
            class="demo-ruleForm el-form-bottom">
            <el-col :span="24">
              <el-form-item label="评价商品">
                <div>{{ ruleForm.productName }}</div>
                <img :src="$imagePath + ruleForm.productImg" width="120" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评价人账号">
                {{ ruleForm.memberName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评价星级">
                {{ ruleForm.grade }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="评价内容">
                {{ ruleForm.content }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="评价图片">
                <el-image
                  @click="choseEventImg($imagePath + item.imagePath)"
                  width="80"
                  height="80"
                  :preview-src-list="imgList"
                  v-for="item in productCommentPictureList"
                  :src="$imagePath + item.imagePath"
                  style="vertical-align: middle; margin-right: 5px; width: 100px; height: 100px" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="回复" prop="replyContent">
                <el-input
                  type="textarea"
                  disabled
                  v-model="ruleForm.replyContent"
                  :autosize="{ minRows: 3 }"
                  style="width: 700px"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchProductComments, fetchProductCommentsList, passProductComments, rejectProductComments } from "@/api/memberComment";
import Pagination from "@/components/Pagination";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "productcommentslist",
  components: { Pagination },
  data() {
    return {
      judgmentTitle: "审核通过回复",
      dialogFormVisible: false,
      productCommentPictureList: [],
      dataList: [],
      commState: [],
      total: 0,
      currentRow: null,
      listLoading: false,
      imgList: [],
      ruleForm: {
        id: "",
        productName: "",
        productImg: "",
        memberName: "",
        grade: "",
        content: "",
        replyContent: "",
      },
      listQuery: {
        page: 1,
        limit: 20,
        q_memberName: "",
        q_state: "",
      },
      rules: {
        replyContent: [
          {
            max: 200,
            message: "不能超过200个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    getCodeManager("PRODUCT_COMM_STATE", () => {
      this.commState = codeToArray("PRODUCT_COMM_STATE");
    });
    this.getList();
  },
  methods: {
    choseEventImg(item) {
      this.imgList = [];
      this.imgList[0] = item;
    },
    handleSelectionChange(val) {
      this.currentRow = val;
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      fetchProductCommentsList(this.listQuery).then((response) => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    check() {
      this.getList();
    },
    rest() {
      this.listQuery = {
        page: 1,
        limit: 20,
        q_memberName: "",
        q_state: "",
      };
      this.getList();
    },
    stateYes() {
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }

      if (this.currentRow.state != 1) {
        Message.error("该状态不可审核");
        return;
      }
      passProductComments({
        id: this.currentRow.id,
        replyContent: "",
      }).then((res) => {
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.dialogFormVisible = false;
          this.getList();
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    stateNo() {
      let ids = "";
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }

      if (this.currentRow.state != 1) {
        Message.error("该状态不可删除");
        return;
      }

      this.$confirm("确定要删除吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        rejectProductComments({ ids: this.currentRow.id }).then((res) => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      });
    },
    detail() {
      let ids = "";
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }

      this.ruleForm.id = this.currentRow.id;
      this.ruleForm.productName = this.currentRow.productName;
      this.ruleForm.productImg = this.currentRow.productImg;
      this.ruleForm.memberName = this.currentRow.memberName;
      this.ruleForm.grade = this.currentRow.grade;
      this.ruleForm.content = this.currentRow.content;
      this.ruleForm.replyContent = this.currentRow.replyContent;
      this.productCommentPictureList = this.currentRow.productCommentPictureList;
      this.judgmentTitle = "评价详情";
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style>
.filter-container .el-col-6 {
  margin-bottom: 15px;
}
.filter-item {
  margin-bottom: 0;
}
/deep/ .filter-container label {
  font-size: 14px;
  font-weight: 500;
  margin-right: 10px;
}
</style>
